<template>
  <div class="fillcontain">
    <head-top></head-top>
    <div class="table_container">

      <el-button
        type="primary"
        @click="handleAdd">添加</el-button>

      <!--列表-->
      <el-table :data="groupList" highlight-current-row v-loading="loading" style="width: 100%;">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="name" label="班级" sortable></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="small"
              @click="handleAllot(scope.row)">分配人员</el-button>
            <el-button
              size="small"
              @click="handlePatch(scope.row)">编辑</el-button>
            <!--<el-button-->
              <!--size="small"-->
              <!--type="danger"-->
              <!--@click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
          </template>
        </el-table-column>
        <!--<el-table-column prop="age" label="name数量" width="100" sortable>-->
        <!--</el-table-column>-->
      </el-table>
      <el-col :span="24" class="toolbar">
        <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
        </el-pagination>
      </el-col>

      <el-dialog title="分配人员" :visible.sync="dialogAFormVisible" size="small">
        <el-form  :model="allotData">
        <el-form-item label="人员列表">
          <el-transfer
            :titles="['未分配人员', '已选择人员']"
            v-model="allotData.selectATable" :data="userOptions"></el-transfer>
        </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="AllotUser">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="创建班级" :visible.sync="dialogFormVisible"  width="30%">
        <el-form :model="selectTable">
          <el-form-item label="班级">
            <el-input v-model="selectTable.name"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="createGroup">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="修改班级" :visible.sync="dialogFormVisible1"  size="tiny">
        <el-form :model="patchTable">
          <el-form-item label="班级">
            <el-input v-model="patchTable.name"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="patchGroup">确 定</el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
  import headTop from './head.vue'
  import { getAllotUser, AllotUser, getObjectList, createGroup, patchGroup } from '@/api/api'
  export default {
    data () {
      return {
        loading: false,
        selectTable: {
          name: ''
        },
        patchTable: {
          id: '',
          name: ''
        },
        allotData: {
          selectATable: [],
          id: ''
        },
        userOptions: [],
        groupList: [],
        page: 1,
        total: 0,
        dialogFormVisible: false,
        dialogAFormVisible: false,
        dialogFormVisible1: false
      }
    },
    components: {
      headTop
    },
    created () {
      this.initData()
    },
    methods: {
      // 获取设备名称
      async initData () {
        this.loading = true
        this.selectTable.name = '' // 重置输入框内容
        this.selectTable.examURL = ''
        try {
          getObjectList(this.page).then((res) => {
            this.total = res.data.count
            this.groupList = res.data.results  // type 看下转换下，通过store获取
            this.loading = false
          })
        } catch (err) {
          console.log('获取数据失败', err)
        }
      },
      handleCurrentChange (val) {
        this.page = val
        this.initData()
      },
      handleExamSuccess (res, file) {
//        this.imageUrl = URL.createObjectURL(file.raw)
        this.selectTable.examURL = res.name
      },
      handleAllot (row) {
        this.dialogAFormVisible = true
        this.allotData.id = row.id
        this.userOptions = []
        this.allotData.selectATable = []
        getAllotUser(row.id).then(res => {
          res.data.AllotList.forEach((item, index) => {
            this.userOptions.push({
              label: item.username,
              key: item.id
            })
          })
          res.data.classUser.forEach((item, index) => {
            this.allotData.selectATable.push(item.id)
          })
        })
      },
      async AllotUser () {
        AllotUser(this.allotData.id, this.allotData.selectATable).then(res => {
          if (res.status === 200) {
            this.$message({
              type: 'success',
              message: '添加成功'
            })
            this.dialogAFormVisible = false
            this.initData()
          } else {
            this.$message({
              type: 'error',
              message: '添加失败'
            })
          }
        }).catch(error => {
          this.$message({
            type: 'error',
            message: '添加失败'
          })
          console.log('班级添加失败', error)
        })
      },
      handleAdd () {
        this.dialogFormVisible = true
      },
      async createGroup () {
        let postData = {
          name: this.selectTable.name
        }
        createGroup(postData).then(res => {
          if (res.status === 201) {
            this.$message({
              type: 'success',
              message: '添加成功'
            })
            this.dialogFormVisible = false
            this.initData()
          } else {
            this.$message({
              type: 'error',
              message: '添加失败'
            })
          }
        }).catch(error => {
          this.$message({
            type: 'error',
            message: '添加失败'
          })
          console.log('班级添加失败', error)
        })
      },
      async handleDelete (index, row) {
      },
      handlePatch (row) {
        this.patchTable.id = row.id
        this.patchTable.name = row.name
        this.dialogFormVisible1 = true
      },

      async patchGroup () {
        patchGroup(this.patchTable.id, {name: this.patchTable.name}).then(res => {
          if (res.status === 200) {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            this.dialogFormVisible1 = false
            this.initData()
          } else {
            this.$message({
              type: 'error',
              message: '修改失败'
            })
          }
        }).catch(error => {
          this.$message({
            type: 'error',
            message: '修改失败'
          })
          console.log('班级修改失败', error)
        })
      }
    }
  }

</script>

<style scoped>
  .el-button {
    margin: 5px;
  }
</style>
